<template>

  <div class="connects">
    <div class="login_box">
      <img class="login_box_img" src="../assets/login_bg.png" alt="" />
      <div class="log_form">
        <div class="input_item">
          <div class="input_item_title">
            {{$t('account_numberID')}}:
          </div>
          <el-input :placeholder="$t('Please_enter_your_account_number')" v-model="code"></el-input>
        </div>
        <div class="input_item">
          <div class="input_item_title">
            {{$t('password')}}:
          </div>
          <el-input :placeholder="$t('Please_enter_your_password')" type="password" v-model="password"></el-input>
        </div>
        <div class="" style="display: flex; justify-content: space-between;font-size: 12px; color: #ccc;">
          <span type="text" @click="RegistrationShow = true ; isXieYi=false" style="color: dodgerblue;cursor:pointer;" round>注册</span>
          <!-- <span type="text" style="cursor:pointer;" round>忘记密码</span> -->
        </div>
        <el-button type="primary" @click="gologin" class="btn_submit">{{$t('login')}}</el-button>

        <div class="other_btn">
          <el-button type="primary" round>naver{{$t('login')}}</el-button>
          <el-button type="success" round>kakao{{$t('login')}}</el-button>
        </div>

      </div>
    </div>
    <el-dialog
      :title="$t('Registration')"
      :visible.sync="RegistrationShow"
      width="60%"
      :before-close="handleClose">
      <div>
        <div v-if="isXieYi==false">
          <h3>{{deal1.name}}</h3>
          <div class="dealBox" v-html="deal1.content">

          </div>
          <div class="IDo">
            <el-checkbox style="" v-model="checked1">{{$t('I_agree')}}</el-checkbox>
          </div>
          <h3>{{deal2.name}}</h3>
          <div class="dealBox" v-html="deal2.content">

          </div>
          <div class="IDo">
            <el-checkbox style="" v-model="checked2">{{$t('I_agree')}}</el-checkbox>
          </div>
          <div class="IDo">
            <el-button :disabled="(checked1==true && checked2==true) ? false:true" @click="isXieYi=true" type="primary">{{$t('next')}}</el-button>
          </div>
        </div>

        <el-form v-else :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item :label="$t('nickname')" prop="nickname">
            <!-- 昵称 -->
            <el-input :placeholder="$t('nickname')" v-model="ruleForm.nickname"></el-input>
          </el-form-item>
          <el-form-item :label="$t('email')" prop="email">
            <!-- 邮箱 -->
            <el-input :placeholder="$t('email')" v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item :label="$t('mobile')" prop="mobile">
            <!-- 电话号 -->
            <el-input type="text" @input="(e)=>{ruleForm.mobile = e.replace(/[^0-9]/g,'')}" :placeholder="$t('mobile')" v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item :label="$t('tel')" >
            <!-- 座机号 -->
            <el-input type="text" @input="(e)=>{ruleForm.tel = e.replace(/[^0-9 -]/g,'')}" :placeholder="$t('tel')" v-model="ruleForm.tel"></el-input>
          </el-form-item>
          <el-form-item :label="$t('korean_name')" prop="korean_name">
            <!-- 韩国姓名 -->
            <el-input :placeholder="$t('korean_name')" v-model="ruleForm.korean_name"></el-input>
          </el-form-item>
          <el-form-item :label="$t('en_name')" prop="en_name">
            <!-- 英文全名 -->
            <el-input :placeholder="$t('en_name')"  @input="(e)=>{ruleForm.en_name = e.replace(/[^a-zA-Z -]/g,'')}" v-model="ruleForm.en_name"></el-input>
          </el-form-item>
          <el-form-item :label="$t('password')" prop="password">
            <!-- 密码 -->
            <el-input type="password" :placeholder="$t('password')" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item :label="$t('old_password')" prop="old_password">
            <!-- 确认密码 -->
            <el-input type="password" :placeholder="$t('old_password')" v-model="ruleForm.old_password"></el-input>
          </el-form-item>
          <el-form-item :label="$t('address')" prop="address">
            <!-- 地址 -->
            <el-input :placeholder="$t('address')" v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item :label="$t('customs')" prop="customs">
            <!-- 个人清关码 -->
            <el-input :placeholder="$t('customs')" v-model="ruleForm.customs"></el-input>
          </el-form-item>
          <el-form-item :label="$t('self_code')" prop="code">
            <!-- 编号 -->
            <el-input :placeholder="$t('self_code')" v-model="ruleForm.code"></el-input>
          </el-form-item>
          <el-form-item :label="$t('zip_code')" prop="zip_code">
            <!-- 邮编 -->
            <el-input :placeholder="$t('zip_code')" v-model="ruleForm.zip_code"></el-input>
          </el-form-item>
          <div class="IDo ">
            <el-button @click="RegistrationShow = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="submitZC('ruleForm')">{{$t('shure')}}</el-button>
          </div>


        </el-form>
      </div>

    </el-dialog>



  </div>
</template>

<script>
  import {
    login,
    login_register,
    agreement_detail
  } from '@/utils/wqzApi'
  export default {
      components: {
      },
      data() {
        return {
          checked1:false,
          checked2:false,
          rules:{
              "nickname": [
                { required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },
                { min: 2, max: 10, message: this.$t('string_length_check'), trigger: 'blur' }
              ], //昵称
              "password": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },
              { min: 6, max: 18, message: this.$t('password_length'), trigger: 'blur' }
              ], //密码
              "old_password": [
                { min: 6, max: 18, message: this.$t('password_length'), trigger: 'blur' },
                { validator: (rule, value, callback)=>{
                  if (value === '') {
                    callback(new Error(this.$t('Please_enter_your_password')));
                  } else if (value !== this.ruleForm.password) {
                    callback(new Error(this.$t('The_two_passwords_are_inconsistent')));
                  } else {
                    callback();
                  }
                }, trigger: 'blur' }
              ], //确认密码
              "korean_name":[{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' },], //韩国姓名
              "en_name": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }], //英文全名
              "mobile": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//手机
              "customs":[{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//个人清关码
              "email":[{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }], //邮箱
              "code":[{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//编号
              "address":[{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//地址
              "tel": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//座机
              "zip_code": [{ required: true, message: this.$t('public.Please_enter'), trigger: 'blur' }],//邮编
          },
          ruleForm:{
            "nickname": "", //昵称
            "password": "", //密码
            "old_password": "", //确认密码
            "korean_name": "", //韩国姓名
            "en_name": "", //英文全名
            "mobile": "", //手机
            "customs": "", //个人清关码
            "email": "", //邮箱
            "code": "", //编号
            "address": "", //地址
            "tel": "", //座机
            "zip_code": "" //邮编
          },
          code:'',
          password:'',
          isXieYi:false,
          RegistrationShow:false,
          deal1:{},
          deal2:{}
        }
      },
      mounted() {
        this.getXieYi(1)
        this.getXieYi(2)
      },
      methods:{
        getXieYi(type){
          // 获取协议详情
          var data = {
            id:type
          }
          agreement_detail(data).then(res=>{
            if(type==1){
              this.deal1 = res.data
            }
            if(type==2){
              this.deal2 = res.data
            }
          })
          console.log(data)
        },
        submitZC(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              login_register(this.ruleForm).then(res=>{
                this.$message({
                  type:'success',
                  message:this.$t('registered_successfully')
                })
                this.handleClose()
              })
            } else {
              return false;
            }
          });
        },
        handleClose(){
          this.RegistrationShow = !this.RegistrationShow
        },
        gologin(e){
          var data = {
            "code": this.code, //编号
            "password": this.password //密码
          }
          login(data).then(res=>{
            console.log(res)
            this.$message({
              type:'success',
              message:'login Success',
            })
            localStorage.setItem('token',res.data)
            setTimeout(()=>{
              // location.reload()
              this.$router.push({path:'/'})
            },100)
            // location.reload()
          }).catch(err=>{
            console.log(err , 'cauowu1')
          })

          //
        }
      }

  }
</script>

<style lang="scss" scoped >
  .IDo{
    display: flex;
    justify-content: flex-end;
    width: 90%;
    margin: 0 auto;
    margin-top: 1vh;
    margin-bottom: 1vh;
  }
  .dealBox{
    width: 90%;
    height: 30vh;
    overflow: auto;
    margin: 0 auto;
    margin-top: 1vh;
    margin-bottom: 1vh;
    box-shadow: 0 0 10px  rgba(0, 0, 0, .2);
    padding:10px;
    box-sizing: border-box;

  }
  .other_btn{
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  .log_form{
    width: 100%;
    padding: 0 10%;
  }
  .connects{
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

  }
  .login_box{
    padding: 15px;
    box-sizing: border-box;
    width: 70%;
    // height: 60vh;
    border-radius: 20px;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
  }
  .login_box_img{
    width: 50%;
  }
  .btn_submit{
    width: 100%;
    margin-top: 15px;
  }
  .input_item{
    display: flex;
    margin-bottom: 10px;
    .input_item_title{
      width: 80px;
      display: flex;
      align-items: center;
    }
  }
  .bg-purple{
    background-color: #f2f2f2;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
  }
</style>
